<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title> 06.3解决setState方法内的访问构造器变量问题 </title>
  <style></style>
</head>

<body>
  <!-- 这是 react渲染到页面上的结点 可以创建多个节点 -->
  <div id="root"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>


  <!-- 加载我们的 React 组件。-->
  <script type="text/babel">

    class Toggle1 extends React.Component {
      constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
      }
      handleClick(e) { this.setState((state) => ({ isToggleOn: !state.isToggleOn })); }
      render() {
        return (
          <div>
            // 此语法确保 `handleClick` 内的 `this` 已被绑定。
            <button href="#" onClick={() => this.handleClick()} >
              onClick 通过绑定一个箭头函数 箭头函数 返回 handleClick!--{this.state.isToggleOn ? 'NO' : 'OFF'}
            </button>
            // 此语法确保 `handleClick` 内的 `this` 已被绑定。
            <button href="#" onClick={this.handleClick.bind(this)} >
              onClick 的 handleClick bind 到 this-{this.state.isToggleOn ? 'NO' : 'OFF'}
            </button>
          </div>
        )
      }
    }

    class Toggle2 extends React.Component {
      constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
      }
      // 这个只是确保 handleClick 能够访问到构造器内的变量
      handleClick = (arg1, arg2) => {
        // 此语法确保 `handleClick` 内的 `this` 已被绑定。 
        // 可以 在标签中使用 onClick={this.handleClick} 
        // 但是传递参数还是要 bind 
        // 注意: 这是 *实验性* 语法。
        this.setState((state) => ({ isToggleOn: !state.isToggleOn }));
        console.log('arg1', arg1);
        console.log('arg2', arg2);
      }
      render() {
        return (
          <div>
            // 此语法确保 `handleClick` 内的 `this` 已被绑定。
            <button href="#" onClick={(e) => this.handleClick(e, 'str')} >
              <b>箭头函数定义后的函数</b> 调用加上括号的使用方式 <b>需要显示传递</b> event (e) =&gt; this.handleClick(e)!--{this.state.isToggleOn ? 'NO' : 'OFF'}
            </button>
            <button href="#" onClick={this.handleClick.bind(this, 'str')} >
              <b>隐式这种类型下的传参</b> this.handleClick.bind(this, 'str')!--{this.state.isToggleOn ? 'NO' : 'OFF'}
            </button>
            <button href="#" onClick={this.handleClick} >
              this.handleClick<b>这种类型下无法传参</b >!--{this.state.isToggleOn ? 'NO' : 'OFF'}
            </button>
          </div>
        )
      }
    }

    ReactDOM.render(
      <div>
        <Toggle1 /> <br />
        <Toggle2 />
      </div>,
      document.getElementById('root')
    );
  </script>
</body>

</html>